import React from 'react'
import { NavBar, Toast } from 'antd-mobile'
import style from './index.less'


export default function OrderPending() {
  const back = () =>
    Toast.show({
      content: '点击了返回区域',
      duration: 1000,
    })


  return (
    <div className={style.peing_list}>
      <NavBar onBack={back}>订单详情</NavBar>
      <div className={style.peing_head}>
        <div className={style.peing_head_left}>
          待支付
        </div>
        <div className={style.peing_head_right}>
          剩余2天23小时
        </div>
      </div>
      <div className={style.peing_cont}>
        <div className={style.cont_head}>
          【训练营第一期】 3天基础破题技巧提升
        </div>
        <div className={style.cont_head2}>
          <div className={style.cont_s1}>基础经济</div>
          <div className={style.cont_s2}>直播</div>
        </div>
        <div className={style.cont_foot}>
          <div className={style.cont_foot_left}>
            <div className={style.cont_foot_img}>
              <img src="https://www.axured.cn/assets/axurefiles/d4e63ad29569bd2ee0587e8085c998da_653/images/%E5%88%97%E8%A1%A8/u2621.png" />
            </div>
            <div className={style.cont_foot_f}>张老师</div>
          </div>
          <div className={style.cont_foot_right}>
            <div className={style.cont_foot_img1}>
              <img src="https://www.axured.cn/assets/axurefiles/d4e63ad29569bd2ee0587e8085c998da_653/images/%E5%88%97%E8%A1%A8/u2623.png" />
            </div>
            <div className={style.cont_foot_f1}>张老师</div>
          </div>
        </div>
      </div>

      <div className={style.peing_cont1}>
        <div className={style.peing_cont1_s1}>订单编号:   20210220128902351</div>
        <div className={style.peing_cont1_s2}>下单时间:   2021-02-20  10:  10: 21</div>
      </div>
      <div className={style.peing_foot}>
        <div className={style.peing_foot_left}>
          <div className={style.peing_foot_left_l1}>商品原价</div>
          <div className={style.peing_foot_left_l1}>已优惠</div>
          <div className={style.peing_foot_left_l1}>优惠卷</div>
          <div className={style.peing_foot_left_l1}>实际支付</div>
        </div>
        <div className={style.peing_foot_right}>
          <div className={style.peing_foot_right_l1}>￥299.00</div>
          <div className={style.peing_foot_right_l1}>-￥298.00</div>
          <div className={style.peing_foot_right_l1}>-￥0.50</div>
          <div className={style.peing_foot_right_l2}>￥0.50</div>
        </div>
        <div className={style.peing_foot_foot}>
          <div className={style.peing_fleft}>
            取消订单
          </div>
          <div className={style.peing_rilet}>
            立即支付
          </div>
        </div>

      </div>
      <br />
      <div className={style.xia}>
        <div className={style.zhao}>
          <div className={style.zhao1}>
            <img src="https://www.axured.cn/assets/axurefiles/d4e63ad29569bd2ee0587e8085c998da_653/images/%E8%AF%BE%E7%A8%8B%E8%AF%A6%E6%83%85/u3965.png" alt="" />
          </div>
          <div className={style.zi}>
                咨询客服
          </div>
        </div>
      </div>
    </div>
  )
}
